import type {ActionType, ProColumns, ProDescriptionsItemProps} from '@ant-design/pro-components';
import {
    PageContainer,
    ProTable,
} from '@ant-design/pro-components';
import React, {useRef, useState} from 'react';
import type {StorageListItem} from './data';
import {storageList} from './service';
import {dataCenterSelectList} from "@/pages/power/data-center-list/service";

export type FormValueType = {
    target?: string;
    template?: string;
    type?: string;
    time?: string;
    frequency?: string;
} & Partial<StorageListItem>;

const StorageList: React.FC = () => {
    const actionRef = useRef<ActionType>();
    /** 国际化配置 */
    const columns: ProColumns<StorageListItem>[] = [
        {
            title: '所属资源池',
            dataIndex: "dataCenterId",
            valueType: 'select',
            search: true,
            hidden: true,
            request: async () => {
                const result = await dataCenterSelectList({});
                return (
                    result.data?.map((item) => ({
                        label: item.name,
                        value: item.dataCenterId,
                    })) || []
                );
            },
        },
        {
            title: '所属资源池',
            dataIndex: "dataCenterName",
            valueType: 'text',
            search: false,
            ellipsis: true, // 关闭自动换行
        },
        {
            title: '存储ID',
            dataIndex: 'storageId',
            search: false,
            hidden: true,
        },
        {
            title: '存储名称',
            dataIndex: 'storageName',
            search: true,
        },
        {
            title: '文件系统类型',
            dataIndex: 'storageType',
            search: false,
        },
        {
            title: '硬盘类型',
            dataIndex: 'hardDiskType',
            valueType: 'text',
            search: false,
            hidden: true,
        },
        {
            title: '容量',
            dataIndex: 'resourceDesc',
            search: false,
        },
        {
            title: '付费方式',
            dataIndex: 'billingCycle',
            valueType: 'text',
            search: false,
            render: (value, record, index) => {
                if (record.billingCycle == 'hour') {
                    return <span>￥{record.unitPrice}/小时</span>;
                } else if (record.billingCycle == 'day') {
                    return <span>￥{record.unitPrice}/天</span>;
                } else if (record.billingCycle == 'month') {
                    return <span>￥{record.unitPrice}/月</span>;
                }
                return record.billingCycle
            },
        },
        {
            title: '开通时间',
            dataIndex: 'createdAt',
            valueType: 'text',
            search: false,
        },

    ];

    return (
        <PageContainer>
            <ProTable<StorageListItem, API.ListPagination>
                headerTitle="存储列表"
                actionRef={actionRef}
                rowKey="orderId"
                search={{
                    labelWidth: 90,
                }}
                toolBarRender={() => [
                ]}
                options={{
                    density: true,
                    fullScreen: true,
                    reload:true,
                    setting: false
                }}
                request={storageList}
                columns={columns}
                rowSelection={false}
            />
        </PageContainer>
    );
};

export default StorageList;
